<!DOCTYPE html>
<html lang="zh-CN">
  <head>
      <%layout("/WEB-INF/view/common/inc/admin_head.html",{title:'角色', styles:'bootstrap,font-awesome,animate,style,bootstrap-table'}){}%>
  </head>

  <body>

  <div class="wrapper wrapper-content">
      <div class="row">
        <div class="col-sm-12">

            <!-- START 右侧数据 -->
                <!-- START 操作按钮 -->
                <div id="toolbar" class="btn-group" style="margin-bottom:5px;">
                  <button type="button" class="add-btn btn btn-sm btn-success"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增</button>
                  <button type="button" class="del-btn btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</button>
                </div>
                <!-- END 操作按钮 -->
                
                <!-- START 数据表格 -->
                <table id="powerroletable"
                           data-toolbar="#toolbar"
                           data-side-pagination="server"
                           data-pagination="true"
                           data-resizable="true"
                           data-show-columns="true"
                           data-side-pagination="server"
                           data-url="${ctxPath}/power/role/findall.do"
                           data-page-size="15">
                </table>
                <!-- END 数据表格 -->
                
            <!-- END 右侧数据 -->
        </div>
      </div>
    </div>

    <%layout("/WEB-INF/view/common/inc/admin_js.html",{modules:'jquery,bootstrap,bootstrap-table,bootstrap-table-zh-CN,layer'}){}%>

    <script>
    var $powerroletable = $('#powerroletable'),selections=[];
    $(function(){
        
        //START 表格配置
        $powerroletable.bootstrapTable({
            height: getHeight(),
            columns: [
                    {
                        field: 'state',
                        checkbox: true,
                        align: 'center',
                        valign: 'middle'
                    },
                    {
                        title: '编号',
                        field: 'id',
                        align: 'left',
                        valign: 'middle',
                        visible: false,
                        sortable: true
                    },
                    {
                        title: '角色名称',
                        field: 'roleName',
                        align: 'left',
                        valign: 'middle',
                        sortable: true
                    },
                    {
                        title: '角色描述',
                        field: 'roleDesc',
                        align: 'left',
                        valign: 'middle'
                    },
                    {
                        title: '状态',
                        field: 'enabled',
                        align: 'left',
                        width: 50,
                        valign: 'middle',
                        sortable: true,
                        formatter: function(v,r){
                        	switch (v) {
							case 0:
								v = '已禁用';
								break;
							case 1:
								v = '已启用';
								break;
							default:
								v = '未知';
								break;
							}
                        	return v;
                        },
                    },
                    {
                        field: 'operate',
                        title: '操作',
                        width: 200,
                        align: 'center',
                        valign: 'middle',
                        formatter: optFormatter
                    }
            ],
            onLoadSuccess : function(){
                //修改角色信息表
                $('.edit-powerrole-btn').on('click',function(){
                    var powerroleid = $(this).attr('data-val');
                    layer.open({
                        title: '修改角色',
                        type: 2,
                        area: ['780px', '300px'],
                        content: ['${ctxPath}/power/role/editpage.do?id='+powerroleid, 'no']
                    });
                });
            
                //删除角色信息表
                $('.del-powerrole-btn').on('click',function(){

                    var delid = $(this).attr('data-val'),delname =$(this).attr('data-val-name');
                    layer.confirm('确定要删除角色？<br>[<strong>'+delname+'</strong>]', {
                        btn: ['确定','取消'],title:'提示'
                    }, function(){
                        $.post('${ctxPath}/power/role/delete.do',{ids: delid},function(data){
                            if( data.ok ){
                                layer.msg(data.msg,{icon: 1,time: 2000},function(){
                                    //刷新页面
                                    $powerroletable.bootstrapTable('refresh');
                                });
                            }else{
                                layer.msg(data.msg,{icon: 0,time: 2000});
                            }
                        });
                    });

                });

                //选择绑定的角色
                $('.bind-powerpermission-btn').on('click',function(){
                    var powerroleid = $(this).attr('data-val');
                    layer.open({
                        title: '绑定权限',
                        type: 2,
                        area: ['780px', '460px'],
                        content: ['${ctxPath}/power/permission/selectpermission.do?rid='+powerroleid, 'yes']
                    });
                });
                
            }
        });
        //END 表格配置
        
        //新增角色信息表
        $('.add-btn').on('click',function(){//新增
            layer.open({
                title: '新增角色',
                type: 2,
                area: ['790px', '300px'],
                skin: 'layer-ext-espresso', 
                content: ['${ctxPath}/power/role/addpage.do', 'no']
            });
        });
        
        //删除角色信息表
        $('.del-btn').on('click',function(){
            var selDatas = $powerroletable.bootstrapTable('getSelections');
            if( selDatas.length == 0 ){
                layer.msg('请选择要删除的角色',{icon: 0,shade: [0.8, '#393D49'],time: 2000});
            }else{
                var ids = [],names = [];
                $.each(selDatas,function(i,d){
                    ids.push(d.id);
                    names.push(d.roleName);
                });
                ids = ids.join(',');
                names = names.join(',');

                layer.confirm('确定要删除这些角色？<br>[<strong>'+names+'</strong>]', {
                    btn: ['确定','取消'],title:'提示'
                }, function(){
                    $.post('${ctxPath}/power/role/delete.do',{ids: ids},function(data){
                        if( data.ok ){
                            layer.msg(data.msg,{icon: 1,time: 2000},function(){
                                //刷新页面
                                $powerroletable.bootstrapTable('refresh');
                            });
                        }else{
                            layer.msg(data.msg,{icon: 0,time: 2000});
                        }
                    });
                })
            }
        });
        
        //表格高度自适应
        $(window).resize(function () {
            $powerroletable.bootstrapTable('resetView', {
                height: getHeight()
            });
        });
    });
    
    //操作菜单
    function optFormatter(value,row){
        var content = '<button class="edit-powerrole-btn btn btn-xs btn-info" data-val="'+row.id+'" title="编辑"><i class="fa fa-edit"></i>  </button>';
        content += '&nbsp;<button class="del-powerrole-btn btn btn-xs btn-danger" data-val="'+row.id+'" data-val-name="'+row.roleName+'" title="删除"><i class="fa fa-trash-o"></i>  </button>';
        content += '&nbsp;<button class="bind-powerpermission-btn btn btn-xs btn-success" data-val="'+row.id+'" title="绑定权限"><i class="fa fa-link"></i>  </button>';
        return content;
    }
    
    //表格高度计算
    function getHeight() {
        return $(window).height() - $('.btn-group').outerHeight(true) - $('.breadcrumb').outerHeight(true) - 100;
    }
    </script>
  </body>
</html>
